<template>
  <div>
    <p>username: {{username}}</p>
    <button @click="sayHi">click</button>
  </div>
</template>

<script>
export default {
  beforeCreate() {
    console.log('#2 beforeCreate')
  },
  setup () {
    // 组件的入口函数，从这儿自动执行
    // !#1 执行时机：比 beforeCreate 还早
    console.log('#1 setup')
    // !#2 setup 中的 this 是 undefined
    console.log(this)

    const username = '吕布'
    const sayHi = () => {
      console.log(username)
    }
    // !#3 数据和方法想在模板中使用，必须 return
    return {
      username,
      sayHi
    }
  }
}
</script>

<style lang="scss" scoped>

</style>